<template>
  <div :class="$style.wrapper">
    <div :class="$style.topoWrapper">
      <div :key="index" :style="tabPosition(tab)" v-for="(tab,index) in tabs">
      </div>
      <ps-topo :view-id="viewId" @viewLoaded="viewLoadedHandler"></ps-topo>
    </div>
    <div :class="$style.artParmeter"></div>
  </div>
</template>
<script>
import PsTopo from './../../../default/components/topo/PsTopo.vue';
import PsStateOverview from './../../../default/components/area-state/PsStateOverview.vue';
import api from '../../../common/js/api';
import { mapGetters } from 'vuex';
import { removeDuplicated, flattenArray } from './../../../common/js/utils';

export default {
  name: 'PsSection',
  components: {
    PsTopo,
    PsStateOverview
  },
  data () {
    return {
      viewId: null,
      tabs: [],
      scale: 1
    };
  },
  computed: {
    ...mapGetters('resource', [
      'currentResource'
    ])
  },
  methods: {
    tabPosition (node) {
      return {
        position: 'absolute',
        width: '20px',
        height: '40px',
        background: 'red',
        'z-index': 100,
        left: (node.rect.x + 15) + 'px',
        top: (node.rect.y + 15) + 'px'
      };
    },
    viewLoadedHandler (canvas) {
      this.tabs = canvas.data.pens;
      this.scale = canvas.data.data.scale;
      let nodeIds = canvas.data.pens.map(pen => pen.data.nodeId);
      let kpis = canvas.data.pens.map(pen => pen.data.kpiIds);
      api.post('kpiDataFlexService.getKpiValueList', ['kpi', {
        'category': 'ci',
        'isRealTimeData': true,
        'timePeriod': 0,
        'nodeIds': removeDuplicated(nodeIds),
        'kpiCodes': removeDuplicated(flattenArray(kpis)),
        'startTime': null,
        'endTime': null,
        'timeRange': '',
        'statisticType': 'psiot',
        'condList': [],
        'includeInstance': true
      }]).then(ret => {
        console.log(ret);
      });
    }
  },
  watch: {
    currentResource: {
      immediate: true,
      handler (res) {
        if (res) {
          api.post('resourceUIService.getResourceById', res.id).then(ret => {
            this.viewId = ret.data.values.view.viewId;
          });
        }
      }
    }
  }
};
</script>
<style lang="scss" module>
@import './../../../style/default/ps-device-view.scss';
</style>
